<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>View All Contest Page</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <link rel="stylesheet" type="text/css" media="all" href="css/jquery-ui-1.8.14.custom.css"  />
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.datepicker-en-AU.js"></script>
        <script type="text/javascript" language="javascript">
            function displayUpdate(index){
                var btn = document.getElementById("btnUpdateCont"+index);
                btn.style.display='none';
                var btnOK = document.getElementById("btnOK"+index);
                btnOK.style.display='block';
                var btnCancel = document.getElementById("btnCancel"+index);
                btnCancel.style.display='block';
                //hide content
                var lbname = document.getElementById("lbname"+index);
                lbname.style.display='none';
                var lbcontent = document.getElementById("lbcontent"+index);
                lbcontent.style.display='none';
                var lbFromDate = document.getElementById("lbFromDate"+index);
                lbFromDate.style.display='none';
                var lbtoDate = document.getElementById("lbtoDate"+index);
                lbtoDate.style.display='none';
                //show text
                var name = document.getElementById("name"+index);
                name.style.display='block';
                var content = document.getElementById("content"+index);
                content.style.display='block';
                var fromDate = document.getElementById("fromDate"+index);
                fromDate.style.display='block';
                var toDate = document.getElementById("toDate"+index);
                toDate.style.display='block';
                $(function() {
                    $( "#fromDate"+index ).datepicker();
                    $( "#toDate"+index ).datepicker();
                });
            }
        </script>

    </head>
    <body>
        <div id="wrapper">
            <div id="header">

                <h1>Photo Share</h1>
                <img src="header_right.gif" alt="hinh"/>
            </div>
            <div id="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Manage Collection</a></li>
                    <li><a href="#">Manage Image</a></li>
                    <li><a href="#">Upload</a></li>
                    <li><a href="#">FAQs</a></li>
                    <li class="end"><a href="#">Contact</a></li>
                </ul>
            </div>
            <div id="main">
                <div id="slidebar">
                    <div id="login">
                        <h1>Login here</h1>

                        <table border="0">
                            <tbody>
                                <tr>
                                    <td><label>Welcome</label></td>
                                </tr>
                                <tr>
                                    <td>Vu Duy Hoang</td>
                                </tr>
                                <tr>
                                    <td><a href="#">My Profile</a></td>
                                </tr>
                                <tr>
                                    <td><a href="#">View History</a></td>
                                </tr>
                                <tr>
                                    <td><a href="#">Logout</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="search">
                        <h1>Search</h1>
                        <table border="0">
                            <tbody>
                                <tr>
                                    <td><label>Name</label></td>
                                </tr>
                                <tr>
                                    <td><input type="text" name="" value=""/></td>
                                </tr>
                                <tr>
                                    <td><input type="submit" value="Search"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="product">
                        <h1>Photo</h1>
                        <ul>
                            <li><a href="#">Collection</a></li>
                            <li><a href="#">+ Ocean</a></li>
                            <li><a href="#">+ Natural</a></li>
                            <li><a href="#">+ Animal</a></li>
                            <li class="end"><a href="#">+ City</a></li>
                        </ul>
                    </div>
                </div>
                <div id="content">
                    <h1>View all Contest</h1>

                    <c:set var="show" value="${requestScope.ShowContest}"/>

                    <table width="790" border="1">
                        <tr bgcolor="#999999">
                            <th width="148" scope="col">Name </th>
                            <th width="156" scope="col">Content </th>
                            <th width="96" scope="col">From date </th>
                            <th width="101" scope="col">To date </th>
                            <th width="60" scope="col">Status</th>
                            <th width="94" scope="col">Update</th>
                            <th width="89" scope="col">Reports</th>
                        </tr>
                        <c:if test="${not empty show}">
                            <c:set var="row" value="0"/>
                            <c:forEach var="iterator" items="${show}">
                                <c:set var="row" value="${row+1}"/>
                                <form id="form1" name="form1" method="post" action="TriController">
                                    <tr>
                                    <input type="hidden" name="txtId" value="${iterator.idContest}" />
                                    <td><label id="lbname${row}">${iterator.nameContest}</label>
                                        <input type="text" name="txtName" id="name${row}" value="${iterator.nameContest}" style="display: none"/>
                                    </td>
                                    <td><label id="lbcontent${row}">${iterator.contentContest}</label>
                                        <input type="text" name="txtContent" id="content${row}" value="${iterator.contentContest}" style="display: none"/>
                                    </td>
                                    <td><label id="lbFromDate${row}">${iterator.fromDate}</label>
                                        <input type="text" name="txtFromDate" id="fromDate${row}" value="${iterator.fromDate}" style="display: none"/>
                                    </td>
                                    <td><label id="lbtoDate${row}">${iterator.toDate}</label>
                                        <input type="text" name="txtToDate" id="toDate${row}" value="${iterator.toDate}" style="display: none"/>
                                    </td>
                                    <td>
                                        <input id="status" type="checkbox" name="txtCheck" value="test" <c:if test="${iterator.status}">checked</c:if> disabled/>
                                    </td>
                                    <td>
                                        <input type="button" name="action" id="btnUpdateCont${row}" value="Update" onclick="displayUpdate(${row})"/>
                                        <input type="submit" name="action" id="btnOK${row}" value="OK" style="display: none"/>
                                        <a href="TriController?action=ViewAllContest">
                                            <input type="button" name="action" id="btnCancel${row}" value="Cancel" style="display: none" onclick="javascipt:window.location.href='TriController?action=ViewAllContest'" />
                                        </a>
                                    </td>
                                    <td><a href="comboTopContest.jsp?txtIdContest=${iterator.idContest}">Show Highest</a></td>
                                    </tr>
                                </form>
                            </c:forEach>
                        </c:if>

                    </table>
                </div>
            </div>
            <div id="footer">

            </div>
        </div>
    </body>
</html>
